<template>
    <div class="wrapper">
        <vHead></vHead>
        <v-sidebar></v-sidebar>
        <div :class="contentClass">
            <router-view class="child-view"></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        components:{
            vHead: require('./header.vue'),
            vSidebar: require('./sidebar.vue'),
        },
        data () { 
            return { 
                transitionName: 'slide-left',
                isCollapse: false,
                menus: [],
                contentClass: {
                    content: true,
                    fullScreen: false,
                },
                iconClass: {
                    screen: true,
                    'md-apps': true,
                    fullScreen: false,
                },
            }
        },
        watch: {
    　　    '$route' (to, from) {
                let isBack = this.$router.isBack  //  监听路由变化时的状态为前进还是后退
                if(isBack) {
                    this.transitionName = 'slide-right'
                } else {
                    this.transitionName = 'slide-left'
                }
                this.$router.isBack = false
            }
    　　},
        created (){
            
        },
        methods: {
            //全屏/退出
            screen(){
                if(this.contentClass.fullScreen) {
                    this.contentClass.fullScreen = false;
                    this.iconClass.fullScreen = false;
                }else{
                    this.contentClass.fullScreen = true;
                    this.iconClass.fullScreen = true;
                }
            },
        },
    }
</script>
<style>
.child-view { 
    width: 100%; 
    height: 100%; 
    transition: all .2s; 
} 
.content{background: #f2f3f7;}

div.fullScreen {
    left: 0;
    top: 0;
}
i.screen{
    color:#fff;
    position: fixed;
    left: 0px;
    top: 0;
    cursor: pointer;
}
i.fullScreen{
    color: #d00;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(50%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(50%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
}
</style>